<template>
  <div class="reg">
    <!-- 头部导航 -->

    <van-nav-bar
      title=""
      left-text="返回登录"
      Right-text="×"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <!-- 注册页面 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="passWord"
        type="password"
        name="passWord"
        label="密码"
        placeholder="设置登陆密码"
        :rules="[{ required: true, message: '请设置密码' }]"
      /><van-field
        v-model="conPwd"
        name="conPwd"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true }]"
      /><van-field
        v-model="nickName"
        name="nickName"
        label="输入昵称"
        placeholder="请输入昵称"
        :rules="[{ required: true }]"
      />

      <div style="margin: 16px">
        <van-button block type="danger" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      passWord: "",
      conPwd: "",
      nickName: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ name: "Login" });
    },
    onClickRight() {
      Toast.fail("失败");
    },

    async onSubmit(values) {
      console.log("submit", values);

      if (values.passWord == values.conPwd) {
        this.$router.push({ name: "Home" });
      } else {
        (this.passWord = ""),
          (this.conPwd = ""),
          Toast.fail("两次密码不一致,请重新输入");
      }
    },
  },
};
</script>

<style></style>
